/**
 * Shopware 5
 * Copyright (c) shopware AG
 *
 * According to our dual licensing model, this program can be used either
 * under the terms of the GNU Affero General Public License, version 3,
 * or under a proprietary license.
 *
 * The texts of the GNU Affero General Public License with an additional
 * permission and of our proprietary license can be found at and
 * in the LICENSE file you have received along with this program.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * "Shopware" is a registered trademark of shopware AG.
 * The licensing of the program under the AGPLv3 does not imply a
 * trademark license. Therefore any rights, title and interest in
 * our trademarks remain entirely with us.
 *
 * @category   Shopware
 * @package    Shopware_Styling
 * @subpackage Template
 * @version    $Id$
 * @author shopware AG
 */
@mixin shopware-theme {

    .theme-listing {

		.x-grid-group-title {
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		.x-grid-group-hd {
			border-width: 0 0 2px 0;
			border-style: solid;
			border-color: #99BBE8;
			padding: 10px 4px 4px 20px;
			background: #FFF;
			cursor: pointer;
			font-size: 12px;
		}

        .thumbnail {

            width: 135px;
            height: 100px;
            margin: 20px 0 35px 28px;
            position: relative;
            float: left;

            .hint {
                position: absolute;
                left: -3px;
                top: -3px;
                height: 70px;
                width: 70px;

                span {
                    @include rotate(-45deg);
                    color: #fff;
                    display: block;
                    font-weight: bold;
                    width: 70px;
                    text-align: center;
                    position: absolute;
                    left: -7px;
                    top: 18px;
                }
            }

            .mapping-config {
                background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAzVJREFUeNp0U2toVFcQnnPue9+b7CPJtUlWrWI0Pv9IxAhVWom1SWxAWUx9RomKoK2KJv7wEaOpQluLRQtFMH+KQtpUIgr9oWh+CKGRmGqkTRuTNYbE3ehm7+7du3uPs4vCInrgu8PMfDNnzp0ZYIzB+yDWnK4X676blFBmdOmzI9z7eCTzeXvkunO3GC+uAMo1M1dBI7V5AwFBi6mCdvXuQGg9M5K9+rX9FZBz+FwFCmer1O4TgZltptUNptUFg7FJ65AW2QzTVfiY1+Yj60fEnrch2Qos1S0XiFsth5IFKnEXBYAQYJQDQgXMZQAx01lySWo8YZl4Eu3vf3hF6zz6dbYCW80JkfPP3Ew9pQqxOoARgLXFZOxQhW2o3C9pf48llFPdU6WdT9P+UFqWTeKXrdP0vVFNH7JbpB/o1G9Hk4rL20ZdPiC8CKt9+nh7rfcRBv+BF3xV5peXttd6llS6Y39l/BzyGlcvGsHgqkwB1Fl3Zk86bWwXmAl8MgYnPsn7Fx23ndXHoo6aYxnZhHqou6evhtenQMAnX+sJFe46fz2E9hQV7HltgmxTeZYGQQuzWX5bAh0XeaevSVLnBiz56nHUN4a/r37KxyMJDnlhg5NuPX4RRHsVlaz2rcUeu0bBBJaMk4HhcQkdo7zN/ZOroMgIrlyYuWlTfl1LMdNjMgdpmOF3xFrrl/+D9m3ZLtSe777UE+EbWPwVrMyPPr/8Te3iTBLEFsSXiC7fhrZlUumiILU4oWGh/b/mL+bcQfsl4llzSBQ/KpvksQuA7UqND8Esi9bf92Rw40TX2V5P1YEyKipNvH96UPSVAgMKXGTY7D2zbpvDqlzOVlCy45cr88vL1kTiTHk2EZaN8CikXo6BmdSAiDIIrgL8+wUwzZufcMlcspCLxn/evaoXK/g8d5QPV568uW80TrwsnQKmJ8BMJYHyPCZRsi0uUoh2u3nV78gNZzqDaKU5g9w6PDJyn0vpbGtFyf+qz5WQHG4o9OQldlYGBp28YagKloStezPKrdmod7drMqZ/i/LPpvZ7F+cd7DAu3HgwgPqviCCiA9GSy4cPrLP0Rn6K6EJUf2jtXwswALxJqW16T4ydAAAAAElFTkSuQmCC") no-repeat;
                width: 16px;
                height: 16px;
                position: absolute;
                right: -2px;
                top: 4px;
            }

            .enabled {
                background: theme-image($theme, 'ribbon_green.png') no-repeat;

                span {
                    text-shadow: 0 1px 0 #2cb400;
                }
            }

            .preview {
                background: theme-image($theme, 'ribbon_blue.png') no-repeat;

                span {
                    text-shadow: 0 1px 0 #0166ff;
                }
            }

            .#{$prefix}editable {
                text-align: center;
                display: block;
                margin-top: 6px;
                color: #A0A0A0;
            }

            .thumb {
                @include single-box-shadow(lighten($font-color, 40%), 0, 0, 5px);
            }

            &.x-item-selected .thumb {
                @include single-box-shadow(#189EFF, 0, 0, 5px);
            }
        }

        .thumbnail .thumb, .inner-thumb {
            width: 141px;
            height: 106px;
        }

        .inner-thumb {
            border: 1px solid #c4c4c4;
            padding: 3px;
        }

        .inner-thumb img {
            width: 133px;
            height: 98px;
        }
    }

    .theme-info-panel {
        .screen {
            margin: 10px 0;
            border: 1px solid #c4c4c4;
            padding: 10px;

            img {
                margin: 0 auto;
                display: block;
                max-width: 100%;
            }
        }

        .info-item {
            margin: 3px 0;
            padding: 5px;

            .label {
                font-weight: 700;
            }
            .value {
                padding-top: 4px;
            }
        }
    }

    .theme-config-window {
        .theme-custom-field {
            .x-form-item-body {
                padding: 1px;
            }
        }
    }

    div[id^=config-theme-detail] .#{$prefix}panel-body {
        .#{$prefix}preview-image td.#{$prefix}form-item-body {
            background: #fff;
        }
    }
}
